<template>
  <div>
        <div   class="main">
            <div  class="container">
              <div  class="banner">
                <div  class="heardimage" v-if="datainfo && datainfo.nickName">
                  <img  :src="datainfo.headImg">
                </div>
                <div  class="heardimage" v-else>
                  <img  src="/static/img/heard.jpg">
                </div>
                
                <div class="info" v-if="datainfo && datainfo.nickName">
                  <div>
                    <div class="font uname">{{datainfo.nickName}}</div>
                    <div class="font" v-if="datainfo && datainfo.userName"><i  class="icon iconfont icon-mobile"></i>{{datainfo.userName}}</div>
                  </div>
                  <div @click="setup" class="member-box" v-if="datainfo && datainfo.memberType>=0">
                      <i  class="van-icon van-icon-medal-o"></i>
                      <span class="font">会员</span>
                  </div>
                </div>
                <div class="buttons" v-else>
                  <button ><label @click="loginFn">登录</label><em >/</em><label @click="loginFn">注册</label></button>
                </div>
              </div>
            </div>
            <div  class="moneys">
              <div  class="moneysitem">
                <div  class="wallet" v-if="datainfo.sumMoney">
                  {{datainfo.sumMoney}}
                </div>
                <div  class="wallet" v-else>
                  0.00
                </div>
                <div  class="moneyname">
                  钱包 
                </div>
              </div>
              <div  class="moneysitem" >
                <div  class="redpackets" @click="rechargeFn">
                  积分
                </div>
              </div>
              <div  class="moneysitem" >
                <div  class="redpackets " @click="tixianFn">
                  提现
                </div>
              </div>
              <!-- <div  class="moneysitem">
                <div  class="redpackets">
                  0.00
                </div>
                <div  class="moneyname">
                  乐慧城市
                </div>
              </div>
              <div  class="moneysitem" style="margin-right: 0px;">
                <div  class="goldcoin">
                  0
                </div>
                <div  class="moneyname">
                  捐赠次数
                </div>
              </div> -->
            </div>
            <div  class="vipAdvertisement" >
              <!---->
              <div v-if="datainfo.memberType && datainfo.memberType == 2">
                <img  src="/static/img/zhihui_vip.png" class="vip" @click="openZhiHuiVip">
              </div>
              <div v-else >
                <img  src="/static/img/vipb.png" class="vip" @click="openVip">
              </div>
            </div>
            <ul  class="cell-list">
              <li @click="recommendFn"><label >我要推荐</label><i  class="icon iconfont icon-arrow-right"></i></li>
              <li @click="profileFn"><label >完善资料</label><i  class="icon iconfont icon-arrow-right"></i></li>
              <li @click="myTuiguangFn"><label >我的推广</label><i  class="icon iconfont icon-arrow-right"></i></li>
              <li @click="myOrder"><label >我的账单</label><i  class="icon iconfont icon-arrow-right"></i></li>
            </ul>
            <a  href="" class="mint-cell" type="tel"><!---->
            <div class="mint-cell-left">
            </div>
            <div class="mint-cell-wrapper">
              <div class="mint-cell-title">
                <!----><span class="mint-cell-text">联系客服</span><!---->
              </div>
              <div class="mint-cell-value">
                <a  href="javascript:;void(0)">{{siteinfo.kefuTel}}</a>
              </div>
              <!---->
            </div>
            <div class="mint-cell-right">
            </div>
            </a><!---->
            <!-- <div  class="logos">
              <img  src="/static/img/logo.png">
            </div> -->
            <div  class="mint-actionsheet" style="display: none;">
              <ul class="mint-actionsheet-list" style="margin-bottom: 5px;">
                <li class="mint-actionsheet-listitem">退出登录</li>
              </ul>
              <a class="mint-actionsheet-button">取消</a>
            </div>
            <div  >
              <div  class="fixed-footer">
                <div  style="overflow: hidden;">
                  <a  href="/index" class="router-link-active"><i  class="icon iconfont icon-home-fill"></i><span >首页</span></a>
                  <a  href="/all" class=""><i  class="icon iconfont icon-find"></i><span >全部</span></a>
                  <!-- <a  href="/history" class=""><i  class="icon iconfont icon-order"></i><span >历史</span></a> -->
                  <a  href="/my" class="router-link-exact-active router-link-active active"><i  class="icon iconfont icon-person"></i><span >我的</span></a>
                </div>
              </div>
            </div>
          </div>
          <van-action-sheet
            v-model="sheetVisible"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel"
            @select="onSelect"
          />
  </div>
</template>

<script>
import { MemberBaseInfoUrl, CashoutAddUrl,SiteConfigDetailUrl } from "@/api/axiosFun";
import { getCode } from "@/api/login";
import { Toast } from 'vant';
export default {
  name: "Index",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
	  datainfo: {},
	  siteinfo: {},
	  page:1,
	pageSize:100,
	traderType:"",
	cityId:"",
	orderNum:false,
	Latitude:"",
  Longitude:"",
  sheetVisible: false,
  actions: [{ name: '退出登录', value:1}]
    };
  },
  created(){
    // = new VConsole();
    
    //console.log(JSON.parse(localStorage.getItem("userinfo")).nickName);
    //if(localStorage.getItem("userinfo") && JSON.parse(localStorage.getItem("userinfo")).nickName){
    if(localStorage.getItem("token")){
      //this.datainfo = JSON.parse(localStorage.getItem("userinfo"));
      this.baseinfoFn();
    }
    //console.log(this.datainfo);
  },
  mounted() {
    
    this.init();
    
  },
  methods: {
    init() {
      // MemberBaseInfoUrl().then(res => {
      //   console.log(999);
      //   console.log(res);
      //   console.log(999);
      //   if (res.data.errCode == 0 && res.data.data) {
      //     this.datainfo = res.data.data;
      //   }
      // });
      SiteConfigDetailUrl().then(res => {
        console.log(res);
        if (res.errCode == 0) {
          this.siteinfo = res.data;
        }
      });
    },
    baseinfoFn(){
       console.log(8888);
      MemberBaseInfoUrl().then(res => {
        console.log(8888);
        console.log(res);
        console.log(7777);
        if (res.errCode == 0 && res.data) {
          this.datainfo = res.data;
        }
      });
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      console.log(item);
      this.show = false;
      window.localStorage.setItem('token',null); 
      window.localStorage.clear();
      Toast("退出成功");
      this.$router.replace('/index');
    },
    onCancel() {
      Toast('取消');
    },
    setup(){
      this.sheetVisible = true;
    },
    openVip(){
      this.$router.push('/vip')
    },
    openZhiHuiVip(){
      this.$router.push('/zhihuivip')
    },
    recommendFn(){
      this.$router.push('/recommend')
      //this.$router.replace({ name: "qrcodeTuijian"});
    },
    loginFn(){
      this.$router.push('/author')
      //getCode();
    },
    myOrder(){
      this.$router.push('/payOrder')
    },
    myTuiguangFn(){
      this.$router.push('/tuiguang')
    },
    profileFn(){
      this.$router.push('/profile')
    },
    regFn(){
      this.$router.push('/register')
    },
    tixianFn(){
      CashoutAddUrl().then(res => {
        console.log(res);
        //if (res.errCode == 0) {
          //this.bannerList = res.data;
        //}
      },err=>{
        console.log(err);
        Toast('取消');
      });
      //this.$router.push('/tixian')
    },
    rechargeFn(){
      this.$router.push('/recharge')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
    padding-bottom: 1.42rem;
}
.banner {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: .7rem .43rem;
    overflow: hidden;
    background: -webkit-gradient(linear,left top,right top,from(#0af),to(#0085ff));
    background: linear-gradient(90deg,#0af,#0085ff);
    position: relative;
}
.banner .setting, .banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
}
.heardimage {
    width: 1.77rem;
    height: 1.77rem;
    border-radius: 50%;
    overflow: hidden;
}
.heardimage img {
    width: 100%;
    height: 100%;
}
.buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 0 20px;
}
.buttons label{
  font-size: 14px;
}
.buttons em{
  font-size: 14px;
}
button, input {
    outline: none;
}
.buttons button {
    width: auto;
    height: .9rem;
    line-height: 0.4rem;
    border-radius: .42rem;
    padding: 0 .4rem;
    border: none;
    color: #fff;
    background-color: rgba(0,0,0,.26);
    letter-spacing: .05rem;
}
.buttons button em {
    font-style: normal;
    padding: 0 .1rem;
}
.moneys {
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 2.39rem;
    border-bottom: 1px solid #ededed;
}
.moneysitem {
    padding: 20px 0;
    background: #fff;
    font-weight: 700;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid #ededed;
}
.wallet {
    color: #0098fb;
    font-size: .58rem;
    margin-bottom: 10px;
}
.moneyname {
    color: #666;
    font-size: .32rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: Center;
    -ms-flex-align: Center;
    align-items: Center;
}
.moneysitem {
    padding: 20px 0;
    background: #fff;
    font-weight: 700;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid #ededed;
}
.redpackets {
    color: #fe5f3f;
    font-size: .58rem;
    margin-bottom: 10px;
    margin-top: 10px;
}
.moneyname {
    color: #666;
    font-size: .32rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: Center;
    -ms-flex-align: Center;
    align-items: Center;
}
.moneysitem {
    padding: 20px 0;
    background: #fff;
    font-weight: 700;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid #ededed;
}
.moneysitem:nth-of-type(3) {
    border: none;
}
.goldcoin {
    color: #6ac20b;
    font-size: .58rem;
    margin-bottom: 10px;
}
.moneyname {
    color: #666;
    font-size: .32rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: Center;
    -ms-flex-align: Center;
    align-items: Center;
}
.vipAdvertisement {
    text-align: center;
    margin-bottom: 20px;
}

.vip {
    display: inline-block;
    height: auto;
    -ms-flex-line-pack: center;
    align-content: center;
    max-width: 90%;
}
.vipAdvertisement img {
    margin-top: 20px;
    width: 100%;
}
.cell-list {
    font-size: 16px;
}
.cell-list li {
    border-bottom: 1px solid #ededed;
    padding: 0 10px;
    min-height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logos {
    margin-top: .9rem;
    margin-bottom: .9rem;
    text-align: center;
}
.logos img {
    width: 30%;
    height: 30%;
    text-align: center;
}
.mint-cell {
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    min-height: 48px;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.mint-cell-left {
    position: absolute;
    height: 100%;
    left: 0;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}
.mint-cell-wrapper {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#d9d9d9),color-stop(50%,#d9d9d9),color-stop(50%,transparent));
    background-image: linear-gradient(180deg,#d9d9d9,#d9d9d9 50%,transparent 0);
    background-size: 120% 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-origin: content-box;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    line-height: 1;
    min-height: inherit;
    overflow: hidden;
    padding: 0 10px;
    width: 100%;
}
 .mint-cell-wrapper {
    background-image: none;
}
.mint-cell-title {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.mint-cell-text {
    vertical-align: middle;
}
.mint-cell-value {
    color: #888;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.tixian{
  font-size: 20px;
  color: #0098fb;
}
.info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left:10px;
  width: 77%;
}
.info .font{
  font-size: 14px;
  color: #ffffff;
  
}
.info .uname{
  margin-bottom: 10px;
}
.member-box{
  display:flex;
  align-items: center;
}
.van-icon-medal-o{
  font-size: 22px;
  color: #ffffff;
  margin-right: 5px;
}
</style>
